<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import upMoreImg from "@/components/public/upMoreImg.vue";

import { signingCy, getSignInfo, checkCooperateEnterprise } from "@/http/api";
export default {
  components: { outMain, upMoreImg },
  name: "",
  data() {
    const checkPhone = (rule, value, callback) => {
      let result = this.$ruleCheck.checkPhone(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkIdCard = (rule, value, callback) => {
      let result = this.$ruleCheck.checkIdCard(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkCom = (rule, value, callback) => {
      if (this.formData.qy_cy_source === 2) {
        callback();
      } else {
        if (!value) {
          callback(new Error("请选择中介公司"));
        } else {
          callback();
        }
      }
    };
    const checkRatio = (rule, value, callback) => {
      if (this.formData.qy_cy_source === 2) {
        callback();
      } else {
        let result = this.$ruleCheck.checkRatio(value);
        if (!result) {
          callback();
        } else {
          callback(new Error(result));
        }
      }
    };
    const checkIntNumber = (rule, value, callback) => {
      let result = this.$ruleCheck.checkIntNumber(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkIntNumber_half = (rule, value, callback) => {
      if (this.formData.qy_glms === 2) {
        callback();
      } else {
        let result = this.$ruleCheck.checkIntNumber(value);
        if (!result) {
          callback();
        } else {
          callback(new Error(result));
        }
      }
    };
    const checkTime_half = (rule, value, callback) => {
      if (this.formData.qy_glms === 2) {
        callback();
      } else {
        let result = this.$ruleCheck.checkIntNumber(value);
        if (!result) {
          if (Number(value) > 0 && Number(value) <= 30) {
            callback();
          } else {
            callback(new Error("日期必须为1-30号之间"));
          }
        } else {
          callback(new Error(result));
        }
      }
    };
    return {
      bookLeaveArr: [
        { label: "甲一", value: "甲一" },
        { label: "甲二", value: "甲二" },
        { label: "丙一", value: "丙一" },
        { label: "丙二", value: "丙二" },
      ],
      detailId: this.$route.query.id,
      companyArr: [],
      formData: {
        invite_interview_id: this.$route.query.id,
        qy_real_name: "",
        qy_sex: 1,
        qy_mobile: "",
        qy_jg: "",
        qy_idcard: "",
        qy_position_name: "",
        qy_enterprise_name: [],
        qy_watercraft_name: "",
        qy_cy_source: 2,
        qy_enterprise_id: "",
        qy_zj_enterprise_id: "",
        qy_zjccbl: "",
        qy_glms: 1,
        qy_cyxz: "",
        qy_cyxz_dw: 1,
        qy_glf: "",
        qy_glf_dw: 1,
        qy_sbfy: "",
        qy_sbfy_dw: 1,
        qy_sbjnsj: "",
        qy_jsf: "",
        qy_jsf_dw: 1,
        qy_zsdj: "",
        qy_zsyjzt: 2,
        qy_tjzt: 2,
        qy_htqyzt: 2,
        qy_scsj: "",
        qy_cyzs_data: [],
        qy_remark: "",
        qy_fj: "",
      },
      rules: {
        qy_real_name: [
          {
            required: true,
            message: "请输入船员姓名",
            trigger: "blur",
            min: 0,
            max: 20,
          },
        ],
        qy_mobile: [
          {
            validator: checkPhone,
            required: true,
            trigger: "blur",
          },
        ],
        qy_jg: [
          {
            required: true,
            message: "请输入船员所在地",
            trigger: "blur",
          },
        ],
        qy_idcard: [
          {
            validator: checkIdCard,
            required: true,
            trigger: "blur",
          },
        ],
        qy_zj_enterprise_id: [
          {
            validator: checkCom,
            required: true,
            trigger: "change",
          },
        ],
        qy_zjccbl: [
          {
            validator: checkRatio,
            required: true,
            trigger: "blur",
          },
        ],
        qy_cyxz: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
        qy_sbfy: [
          {
            validator: checkIntNumber_half,
            required: true,
            trigger: "blur",
          },
        ],
        qy_sbjnsj: [
          {
            validator: checkTime_half,
            required: true,
            trigger: "blur",
          },
        ],
        qy_glf: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
        qy_jsf: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
        qy_zsdj: [
          {
            required: true,
            message: "请选择证书等级",
            trigger: "change",
          },
        ],
        qy_scsj: [
          {
            required: true,
            message: "请选择上船时间",
            trigger: "change",
          },
        ],
      },
    };
  },
  props: {},
  setup() {},
  methods: {
    async saveFn(type) {
      if (type == 1) {
        const valid = await this.$refs.ruleForm.validate();
        if (!valid) {
          return;
        }
        ElMessageBox.confirm(
          "确认签约后，以上信息不可再次编辑,请确认是否无需更改?如后期还需更改请暂存信息",
          "签约提示",
          {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
          this.sureSave(type);
        });
      } else {
        this.sureSave(type);
      }
    },
    async sureSave(type) {
      let queryData = { ...this.formData };
      queryData["is_zc"] = type;
      if (queryData.qy_cy_source == 2) {
        queryData.qy_zj_enterprise_id = "";
        queryData.qy_zjccbl = "";
      }
      let bookArr = [];
      if (queryData.qy_cyzs_data.length > 0) {
        bookArr = queryData.qy_cyzs_data.filter((item) => {
          return item.name && (item.number || item.time);
        });
      }
      queryData.qy_cyzs_data = bookArr;
      const { data } = await signingCy(queryData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: type == 1 ? "签约成功" : "暂存成功",
        });
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    },
    addBookFn() {
      this.formData.qy_cyzs_data.push({
        name: "",
        number: "",
        time: "",
      });
    },
    deleteBookFn(index) {
      this.formData.qy_cyzs_data.splice(index, 1);
    },
    pickerDisTime(time) {
      return time < new Date();
    },
    getImg(url) {
      this.formData.qy_fj = url;
    },
    async getCompany() {
      const { data } = await checkCooperateEnterprise();
      if (data.code == 1) {
        this.companyArr = data.data;
      }
    },
    getShow() {
      let data = {
        invite_interview_id: this.detailId,
      };
      getSignInfo(data).then((res) => {
        if (res.data.code == 1) {
          let resData = res.data.data;
          if (resData.cy_sign) {
            let cy_sign = resData.cy_sign;
            this.formData = {
              invite_interview_id: this.$route.query.id,
              qy_real_name: cy_sign.qy_real_name,
              qy_sex: cy_sign.qy_sex,
              qy_mobile: cy_sign.qy_mobile,
              qy_jg: cy_sign.qy_jg,
              qy_idcard: cy_sign.qy_idcard,
              qy_position_name: cy_sign.qy_position_name,
              qy_enterprise_name: cy_sign.qy_enterprise_name,
              qy_watercraft_name: cy_sign.qy_watercraft_name,
              qy_cy_source: cy_sign.qy_cy_source,
              qy_enterprise_id: cy_sign.qy_enterprise_id,
              qy_zj_enterprise_id: cy_sign.qy_zj_enterprise_id,
              qy_zjccbl: cy_sign.qy_zjccbl,
              qy_glms: cy_sign.qy_glms,
              qy_cyxz: parseInt(cy_sign.qy_cyxz),
              qy_cyxz_dw: cy_sign.qy_cyxz_dw,
              qy_glf: parseInt(cy_sign.qy_glf),
              qy_glf_dw: cy_sign.qy_glf_dw,
              qy_sbfy: parseInt(cy_sign.qy_sbfy),
              qy_sbfy_dw: cy_sign.qy_sbfy_dw,
              qy_sbjnsj: cy_sign.qy_sbjnsj,
              qy_jsf: parseInt(cy_sign.qy_jsf),
              qy_jsf_dw: cy_sign.qy_jsf_dw,
              qy_zsdj: cy_sign.qy_zsdj,
              qy_zsyjzt: cy_sign.qy_zsyjzt,
              qy_tjzt: cy_sign.qy_tjzt,
              qy_htqyzt: cy_sign.qy_htqyzt,
              qy_scsj: cy_sign.qy_scsj ? cy_sign.qy_scsj : "",
              qy_cyzs_data: cy_sign.qy_cyzs_data,
              qy_remark: cy_sign.qy_remark,
              qy_fj: cy_sign.qy_fj,
              qy_watercraft_type: cy_sign.qy_watercraft_type,
              qy_watercraft_area: cy_sign.qy_watercraft_area,
              qy_watercraft_num: cy_sign.qy_watercraft_num,
              qy_watercraft_dw: cy_sign.qy_watercraft_dw,
            };
          } else {
            this.formData.qy_real_name = resData.real_name;
            this.formData.qy_sex = resData.sex;
            this.formData.qy_mobile = resData.mobile;
            this.formData.qy_jg = resData.jg;
            this.formData.qy_idcard = resData.idcard;
            this.formData.qy_zsdj = resData.zsdj;
            this.formData.qy_position_name = resData.position_name;
            this.formData.qy_watercraft_name = resData.watercraft_name;
            this.formData.qy_enterprise_name = resData.enterprise_name;
            this.formData.qy_watercraft_type = resData.watercraft_type;
            this.formData.qy_watercraft_area = resData.watercraft_area;
            this.formData.qy_watercraft_num = resData.watercraft_num;
            this.formData.qy_watercraft_dw = resData.watercraft_dw;
            this.formData.qy_enterprise_id = resData.c_enterprise_id;
            this.formData.qy_cyzs_data = resData.zs_json.filter((item) => {
              return item.number || item.time;
            });
            if (resData.c_enterprise_id == 0) {
              this.formData.qy_glms = 3;
            }
          }
        }
      });
    },
    backFn() {
      this.$router.back();
    },
  },
  mounted() {},
  created() {
    this.getShow();
    this.getCompany();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>签约船员</div>
        <btn value="返回上一级" @ok="backFn"></btn>
      </div>
      <div class="formMain">
        <el-form
          :rules="rules"
          label-width="120"
          ref="ruleForm"
          :model="formData"
        >
          <div class="flexCont">
            <el-form-item label="船员姓名" prop="qy_real_name">
              <el-input
                clearable
                placeholder="请输入船员姓名"
                v-model="formData.qy_real_name"
              />
            </el-form-item>
            <el-form-item label="船员性别">
              <el-radio-group v-model="formData.qy_sex">
                <el-radio :value="1">男</el-radio>
                <el-radio :value="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号" prop="qy_mobile">
              <el-input
                maxlength="11"
                clearable
                placeholder="请输入船员手机号"
                v-model="formData.qy_mobile"
              />
            </el-form-item>
            <el-form-item label="船员籍贯" prop="qy_jg">
              <el-input
                clearable
                placeholder="请输入船员籍贯"
                v-model="formData.qy_jg"
              />
            </el-form-item>
            <el-form-item label="身份证号" prop="qy_idcard">
              <el-input
                placeholder="请输入船员身份证号"
                maxlength="18"
                clearable
                v-model="formData.qy_idcard"
              />
            </el-form-item>
            <el-form-item label="签约岗位" prop="qy_position_name">
              <el-input
                disabled
                placeholder="请选择签约岗位"
                v-model="formData.qy_position_name"
              />
            </el-form-item>
            <el-form-item label="船东公司" prop="qy_enterprise_name">
              <el-input
                disabled
                placeholder="请选择签约岗位"
                v-model="formData.qy_enterprise_name"
              />
            </el-form-item>
            <el-form-item label="船舶名称" prop="qy_watercraft_name">
              <el-input
                disabled
                placeholder="请选择船舶名称"
                v-model="formData.qy_watercraft_name"
              />
            </el-form-item>
            <el-form-item label="船员签约来源">
              <el-radio-group v-model="formData.qy_cy_source">
                <el-radio :value="2">自己找到的</el-radio>
                <el-radio :value="1">中介介绍的</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="中介公司"
              v-if="formData.qy_cy_source === 1"
              prop="qy_zj_enterprise_id"
            >
              <el-select
                clearable
                filterable
                v-model="formData.qy_zj_enterprise_id"
                placeholder="请选择中介公司"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in companyArr"
                  :key="index"
                  :label="item.c_enterprise_name"
                  :value="item.c_enterprise_id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="formData.qy_cy_source === 1"
              label="中介抽成比例"
              prop="qy_zjccbl"
            >
              <el-input
                clearable
                placeholder="请输入中介抽成比例"
                v-model="formData.qy_zjccbl"
              >
                <template #append>%</template>
              </el-input>
            </el-form-item>

            <el-form-item label="管理模式">
              <el-radio-group v-model="formData.qy_glms">
                <el-radio :disabled="formData.qy_enterprise_id == 0" :value="1"
                  >企业代管</el-radio
                >
                <el-radio :disabled="formData.qy_enterprise_id == 0" :value="2"
                  >船东自管</el-radio
                >
                <el-radio :disabled="formData.qy_enterprise_id != 0" :value="3"
                  >企业自管</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="船员薪资" prop="qy_cyxz">
              <el-input
                clearable
                type="number"
                placeholder="请输入船员薪资"
                v-model="formData.qy_cyxz"
              >
                <template #append>
                  <el-select
                    v-model="formData.qy_cyxz_dw"
                    placeholder="单位"
                    style="width: 70px"
                  >
                    <el-option label="元" :value="1" />
                    <el-option label="美元" :value="2" />
                  </el-select> </template
              ></el-input>
            </el-form-item>
            <el-form-item
              label="管理费"
              v-if="formData.qy_glms != 3"
              prop="qy_glf"
            >
              <el-input
                clearable
                type="number"
                placeholder="请输入管理费"
                v-model="formData.qy_glf"
                ><template #append>
                  <el-select
                    v-model="formData.qy_glf_dw"
                    placeholder="单位"
                    style="width: 70px"
                  >
                    <el-option label="元" :value="1" />
                    <el-option label="美元" :value="2" />
                  </el-select> </template
              ></el-input>
            </el-form-item>
            <el-form-item label="介绍费" prop="qy_jsf">
              <el-input
                clearable
                type="number"
                placeholder="请输入介绍费"
                v-model="formData.qy_jsf"
                ><template #append>
                  <el-select
                    v-model="formData.qy_jsf_dw"
                    placeholder="单位"
                    style="width: 70px"
                  >
                    <el-option label="元" :value="1" />
                    <el-option label="美元" :value="2" />
                  </el-select> </template
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="formData.qy_glms != 2"
              label="社保费用"
              prop="qy_sbfy"
            >
              <el-input
                clearable
                type="number"
                placeholder="请输入社保费用"
                v-model="formData.qy_sbfy"
                ><template #append>
                  <el-select
                    v-model="formData.qy_sbfy_dw"
                    placeholder="单位"
                    style="width: 70px"
                  >
                    <el-option label="元" :value="1" />
                    <el-option label="美元" :value="2" />
                  </el-select> </template
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="formData.qy_glms != 2"
              label="社保缴纳时间"
              prop="qy_sbjnsj"
            >
              <el-input
                type="number"
                clearable
                placeholder="请输入社保每月缴纳日期"
                v-model="formData.qy_sbjnsj"
              >
                <template #append>号</template>
              </el-input>
            </el-form-item>

            <el-form-item label="证书等级" prop="qy_zsdj">
              <el-select
                v-model="formData.qy_zsdj"
                placeholder="请选择证书等级"
                style="width: 100%"
              >
                <el-option
                  :key="index"
                  v-for="(item, index) in bookLeaveArr"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="证书邮寄状态">
              <el-radio-group v-model="formData.qy_zsyjzt">
                <el-radio :value="2">未邮寄</el-radio>
                <el-radio :value="1">已邮寄</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="体检状态">
              <el-radio-group v-model="formData.qy_tjzt">
                <el-radio :value="2">未体检</el-radio>
                <el-radio :value="1">已体检</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="合同签约状态">
              <el-radio-group v-model="formData.qy_htqyzt">
                <el-radio :value="2">未签</el-radio>
                <el-radio :value="1">已签</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="上船时间" prop="qy_scsj">
              <el-date-picker
                class="datePull"
                v-model="formData.qy_scsj"
                type="date"
                clearable
                :disabled-date="pickerDisTime"
                placeholder="请选择船员上船时间"
              />
            </el-form-item>
            <el-form-item label="船员证书" class="flexPull">
              <div class="addBootItem">
                <btn value="添加证书" @ok="addBookFn"></btn>
              </div>
              <div class="customCont">
                <div
                  class="customItem flexPull"
                  :key="index"
                  v-for="(item, index) in formData.qy_cyzs_data"
                >
                  <div class="customTd">
                    <el-input
                      clearable
                      placeholder="证书名称"
                      v-model="item.name"
                    />
                  </div>
                  <div class="customTd">
                    <el-input
                      clearable
                      placeholder="证书编号"
                      v-model="item.number"
                    />
                  </div>
                  <div class="customTd">
                    <el-date-picker
                      class="datePull"
                      v-model="item.time"
                      clearable
                      type="date"
                      :disabled-date="pickerDisTime"
                      placeholder="请选择证书到期时间"
                    />
                  </div>
                  <el-button
                    color="#f56c6c"
                    plain
                    @click="deleteBookFn(index)"
                    :dark="isDark"
                    >删除证书</el-button
                  >
                </div>
              </div>
            </el-form-item>
            <el-form-item class="flexPull" label="备注" prop="qy_remark">
              <el-input
                v-model="formData.qy_remark"
                maxlength="3000"
                placeholder="请输入备注"
                show-word-limit
                :rows="8"
                type="textarea"
              />
            </el-form-item>
            <el-form-item class="flexPull" label="附件" prop="userName">
              <upMoreImg :propImgs="formData.qy_fj" @ok="getImg"></upMoreImg>
            </el-form-item>

            <el-form-item class="flexPull" label=" ">
              <btn
                style="margin-right: 15px"
                value="暂存信息"
                @ok="saveFn(2)"
              ></btn>
              <btnPlain value="确认签约" @ok="saveFn(1)"></btnPlain>
            </el-form-item>
            <el-form-item class="flexPull" label="" prop="userName">
              <div class="subTip">
                *温馨提示：请完善相关签约信息，若不确定信息，点击暂存信息，可保存当前信息后续可继续完善。
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less">
.subTip {
  font-size: 12px;
  color: #f56c6c;
}
</style>
